<template>
  <view class="page-content">
    <up-list @scrolltolower="scrolltolower">
      <up-tabs
        :list="orderTabs"
        :scrollable="false"
        :activeStyle="{ color: '#1dcb91' }"
        :current="currentIndex"
        lineColor="#1dcb91"
        @click="tabsChange"
      ></up-tabs>
      <view class="page-order-list">
        <view class="page-order-item" v-for="item in orderList" :key="item.id">
          <view class="page-order-item-head">
            <view class="page-order-info">
              <text class="page-order-info-text">订单号</text
              ><up-text
                color="#1dcb91"
                size="15"
                :text="item.orderNum"
              ></up-text>
            </view>
            <view class="page-order-text"
              ><up-text
                type="primary"
                :text="orderStatusMp(item.status)"
              ></up-text
            ></view>
          </view>
          <view class="page-order-info">
            <text class="page-order-info-text">类型</text
            ><up-text
              color="#1dcb91"
              size="15"
              :text="item.goodsName"
            ></up-text>
          </view>
          <view class="page-order-info">
            <text class="page-order-info-text">时长（天）</text
            ><up-text
              color="#1dcb91"
              size="15"
              :text="item.serviceDay"
            ></up-text>
          </view>
          <view class="page-order-info">
            <text class="page-order-info-text">被护理人</text
            ><up-text color="#1dcb91" :text="item.beNurseInfo.name"></up-text>
          </view>
          <view class="page-order-footer">
            <view class="page-order-info-text">{{ item.createTime }}</view>
            <view class="page-order-option-btn">
              <!-- <up-button type="primary" shape="circle" text="确定"></up-button> -->
              <up-button
                type="info"
                shape="circle"
                text="详情"
                @click="openTion(item)"
              ></up-button>
            </view>
          </view>
        </view>
      </view>
      <view class="empty-main" v-if="orderList.length == 0 && orderListHide">
        <up-empty mode="order" icon="file-text" text="数据为空"> </up-empty>
      </view>
    </up-list>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";

import { GetOrderPage } from "@/api/my.js";

import { orderStatusMp } from "@/utils/common";

// const props = defineProps({
//   types: {
//     type: Number,
//     default: 1,
//   },
// });

import { onLoad } from "@dcloudio/uni-app";

onLoad((option) => {
  let index = orderTabs.value.findIndex((o) => o.value == option.types);
  currentIndex.value = index;
});

let orderListHide = ref(false);

let isCurrent = ref(1);
let currentIndex = ref(0);
let orderTabs = ref([
  { name: "全部", value: -1 },
  { name: "未支付", value: 0 },
  { name: "已支付", value: 1 },
  { name: "已完成", value: 2 },
  { name: "已取消", value: 3 },
]);

let orderList = ref([]);

let status = ref(-1);
let page = ref(1);
let total = ref(0);

const openTion = (item) => {
  uni.navigateTo({
    url: "/pages/mine/orderList/detail?id=" + item.id,
  });
};

const GetOrderPageList = async () => {
  try {
    let params = {
      page: page.value,
      size: 15,
    };
    if (status.value != -1) {
      params.status = status.value;
    }
    uni.showLoading({
      title: "加载中",
    });
    let data = await GetOrderPage(params);
    console.log(data, "a");
    orderList.value = data.list.concat(orderList.value);
    total.value = data.pagination.total;
    if (orderList.value.length == 0) {
      orderListHide.value = true;
    }
    uni.hideLoading();
  } catch (error) {
    uni.hideLoading();
  }
};

const scrolltolower = () => {
  if (orderList.value.length < total.value) {
    page.value++;
    GetOrderPageList();
  }
};

const tabsChange = (ev) => {
  status.value = ev.value;
  page.value = 1;
  orderList.value = [];
  GetOrderPageList();
};

onMounted(() => {
  GetOrderPageList();
});
</script>

<style scoped lang="scss">
.page-content {
  min-height: 100vh;
  padding-bottom: 80rpx;
  box-sizing: border-box;
  // background: linear-gradient(
  //   to bottom,
  //   rgba(200,200,200, 0.1),
  //   rgba(255, 255, 255, 1),
  // );
  background: #f2f2f2;
  border-top: 1px solid #f2f2f2;
}
.page-order-list {
  padding: 0 20rpx;
}

// .page-order-list{
//   border-top: 1px solid #f2f2f2;
// }

.page-order-item {
  border-radius: 16rpx;
  margin: 20rpx 0;
  padding: 20rpx 0;
  background: #fff;
  .page-order-item-head {
    display: flex;
    justify-content: space-between;
    line-height: 2;
    padding-right: 20rpx;
    .page-order-number {
      color: #999;
    }
  }
  .page-order-info {
    padding: 0 20rpx;
    display: flex;
    line-height: 2;
  }
  .page-order-info-text {
    color: #999;
    margin-right: 10rpx;
    font-size: 30rpx;
  }
  .page-order-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1rpx solid #f2f2f2;
    padding: 20rpx 20rpx 0 20rpx;
    margin-top: 10rpx;
    .page-order-option-btn {
      display: flex;
      justify-content: space-between;
      ::v-deep .u-button {
        margin-left: 10rpx;
        height: 64rpx;
        line-height: 64rpx;
      }
    }
  }
}
</style>
